<template>
	<div>
		<el-card shadow="never">
			<div style="text-align: left;">
				<el-select class="x_soso" filterable v-model="search.name" placeholder="按关联设备搜索">
					<el-option v-for="item in rankList" :key="item.id" :label="item.name" :value="item.id"></el-option>
				</el-select>
				<el-select class="x_soso" filterable v-model="search.bodysType" placeholder="按部位类别搜索">
					<el-option v-for="(item, index) in bodysType" :key="index" :label="item.name" :value="item.id"></el-option>
				</el-select>
				<el-button type="primary" @click="searchList">查询</el-button>
				
			</div>
			<div style="text-align: left;">
				<el-button type="primary" @click='reloadVal'>刷新</el-button>
				<el-button type="primary" @click="addColumnClick">
					<i class="el-icon-plus"></i>
					添加参数组
				</el-button>
			</div>
			<div style="clear:both"></div>
			<el-table v-loading="loading" :data="tableData" style="width: 100%;margin-top: 20px">
				<el-table-column type="index" width="50"></el-table-column>
				<el-table-column label="参数组名称" align="center" width="150" prop="partType">
					<template slot-scope="scope">
						<span v-if="scope.row.partType == 1">面部</span>
						<span v-if="scope.row.partType == 2">身体</span>
					</template>
				</el-table-column>
				<el-table-column label="关联设备类型" align="center" width="150" prop="equType">
					<template scope="scope">
						<span v-if="scope.row.equType == 1">PAA抗衰仪</span>
						<!-- <span v-if="scope.row.equType == false">否</span> -->
					</template>
				</el-table-column>
				<el-table-column label="能量低" align="center" width="150" prop="strength1"></el-table-column>
				<el-table-column label="能量普" align="center" width="150" prop="strength2"></el-table-column>
				<el-table-column label="能量中" align="center" width="150" prop="strength3"></el-table-column>
				<el-table-column label="能量高" align="center" width="150" prop="strength4"></el-table-column>
				<el-table-column label="温度低" align="center" width="150" prop="temperature1"></el-table-column>
				<el-table-column label="温度普" align="center" width="150" prop="temperature2"></el-table-column>
				<el-table-column label="温度中" align="center" width="150" prop="temperature3"></el-table-column>
				<el-table-column label="温度高" align="center" width="150" prop="temperature4"></el-table-column>
				
				<el-table-column label="创建时间" align="center" width="180" prop="createTime"></el-table-column>
				<el-table-column label="修改时间" align="center" width="180" prop="updateTime"></el-table-column>
				<el-table-column fixed="right" label="停启用状态" align="center" width="150">
					<template slot-scope="scope">
						<div v-if="scope.row.schemeId == 10"></div>
						<el-switch
							v-else
							v-model="scope.row.isEnabled"
							active-color="#13ce66"
							inactive-color="#dedede"
							:active-value="1"
							:inactive-value="0"
							@change="changeSwitch(scope.$index, scope.row)"
						></el-switch>
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" align="center" width="250">
					<template slot-scope="scope">
						<el-button @click="cellClick(scope.row)" icon="el-icon-edit" type="warning" size="small">编辑</el-button>

					</template>
				</el-table-column>
			</el-table>
			<div style="margin-top: 20px;text-align: right">
				<el-pagination background @current-change="columnFind" :current-page="page.page" :page-size="page.pagesize" layout="prev, pager, next, jumper, total"
				 :total="page.count"></el-pagination>
			</div>
		</el-card>
		<el-dialog :title="cname" :visible.sync="dialogVisible" width="720px" height="600px" :close-on-click-modal="false">
			<el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="添加设备类型" prop="name">
					<el-input disabled :value="equLeixing"></el-input>
				</el-form-item>
				<el-form-item label="部位选择" prop="name">
					<el-select filterable v-model="ruleForm.name" style="width: 100%;" placeholder="选择部位">
						<el-option v-for="item in bodysList" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="温度设置" prop="name">
					<div class="flex-box">
						<div>高</div>
						<input class="inputVal" min="0" max="999" maxlength="3" v-model="ruleForm.heightVal" type="number" placeholder="请输入数值">℃

					</div>
					<div class="flex-box">
						<div>中</div>
						<input class="inputVal" min="0" max="999" maxlength="3" v-model="ruleForm.midVal" placeholder="请输入数值" type="number">℃

					</div>
					<div class="flex-box">
						<div>普</div>
						<input class="inputVal" min="0" max="999" maxlength="3" v-model="ruleForm.puVal" placeholder="请输入数值" type="number">℃

					</div>
					<div class="flex-box">
						<div>低</div>
						<input class="inputVal" min="0" max="999" maxlength="3" v-model="ruleForm.lowVal" placeholder="请输入数值" type="number">℃

					</div>
				</el-form-item>
				<el-form-item label="能量设置" prop="name">
					<div class="flex-box">
						<div>高</div>
						<input class="inputVal" min="0" max="999" maxlength="3" v-model="ruleForm.strengthHeight" placeholder="请输入数值" type="number">MPa

					</div>
					<div class="flex-box">
						<div>中</div>
						<input class="inputVal" min="0" max="999" maxlength="3" v-model="ruleForm.strengthMid" placeholder="请输入数值" type="number">MPa

					</div>
					<div class="flex-box">
						<div>普</div>
						<input class="inputVal" min="0" max="999" maxlength="3" v-model="ruleForm.strengthPu" placeholder="请输入数值" type="number">MPa

					</div>
					<div class="flex-box">
						<div>低</div>
						<input class="inputVal" min="0" max="999" maxlength="3" v-model="ruleForm.strengthLow" placeholder="请输入数值" type="number">MPa

					</div>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="submitForm()">保存</el-button>
			</span>
		</el-dialog>
		<el-dialog title :visible.sync="dialogColor" width="720px" height="600px" :close-on-click-modal="false">
			<el-form :model="ruleFormEditor" ref="ruleFormEditor" label-width="100px" class="demo-ruleForm">
				<el-form-item label="设备类型" prop="name">
					<el-input disabled :value="equLeixing"></el-input>
				</el-form-item>
				<el-form-item label="部位选择" prop="name">
					<el-select filterable v-model="companyIdEditor" disabled style="width: 100%;" placeholder="选择部位" @change="changeStyleValueEditor">
						<el-option v-for="item in bodysListEditor" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="温度设置" prop="name">
					<div class="flex-box">
						<div>高</div>
						<input class="inputVal" min="0" max="999" maxlength="3" v-model="heightValE" placeholder="请输入数值" type="number">℃
					</div>
					<div class="flex-box">
						<div>中</div>
						<input class="inputVal" min="0" max="999" maxlength="3" v-model="midValE" placeholder="请输入数值" type="number">℃
					</div>
					<div class="flex-box">
						<div>普</div>
						<input class="inputVal" min="0" max="999" maxlength="3" v-model="puValE" placeholder="请输入数值" type="number">℃
					</div>
					<div class="flex-box">
						<div>低</div>
						<input class="inputVal" min="0" max="999" maxlength="3" v-model="lowValE" placeholder="请输入数值" type="number">℃
					</div>
				</el-form-item>
				<el-form-item label="能量设置" prop="name">
					<div class="flex-box">
						<div>高</div>
						<input class="inputVal" min="0" max="999" maxlength="3" v-model="strengthHeightE" placeholder="请输入数值" type="number">MPa
					</div>
					<div class="flex-box">
						<div>中</div>
						<input class="inputVal" min="0" max="999" maxlength="3" v-model="strengthMidE" placeholder="请输入数值" type="number">MPa
					</div>
					<div class="flex-box">
						<div>普</div>
						<input class="inputVal" min="0" max="999" maxlength="3" v-model="strengthPuE" placeholder="请输入数值" type="number">MPa
					</div>
					<div class="flex-box">
						<div>低</div>
						<input class="inputVal" min="0" max="999" maxlength="3" v-model="strengthLowE" placeholder="请输入数值" type="number">MPa
					</div>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogColor = false">取 消</el-button>
				<el-button type="primary" @click="submitForm2()">保 存</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import Cookie from 'js-cookie';
	import {
		paramList,
		paramStatus,
		deviceParam,
		deviceParamEditor,
		saveEditor
	} from '../../../server/index.js';

	export default {
		inject: ['reload'],
		data() {
			return {
				//查询
				// heightVal: '',
				// midVal: '',
				// puVal: '',
				// lowVal: '',
				// strengthHeight: '',
				// strengthMid: '',
				// strengthPu: '',
				// strengthLow: '',
				equLeixing: 'PAA抗衰仪',
				heightValE: "", //高
				midValE: "", //中
				puValE: "", // 普
				lowValE: "", // 低
				strengthHeightE: "",
				strengthMidE: "",
				strengthPuE: "",
				strengthLowE: "",
				parametersId: '',
				partType: '',
				partTypeEditor: '',
				companyIdEditor: '',
				searchInput: '',
				search: {},
				// 设备类型
				bodysType: [{
						id: '1',
						name: '面部'
					},
					{
						id: '2',
						name: '身体'
					}
				],
				rankList: [{
						id: 1,
						name: '抗衰仪'
					},

				],
				bodysList: [{
						id: 1,
						name: '面部'
					},
					{
						id: 2,
						name: '身体'
					}
				],
				bodysListEditor: [{
						id: 1,
						name: '面部'
					},
					{
						id: 2,
						name: '身体'
					}
				],
				switchVal: true,

				loading: true,
				tableData: [],
				page: {
					count: 0,
					pagesize: 10,
					page: 1
				},
				ruleForm: {},
				ruleFormEditor: {},
				cname: '',
				flmc: '',

				dialogVisible: false,
				dialogColor: false
			};
		},
		mounted() {
			var page = 1;
			this.columnFind(page);
			Cookie.remove('tabList');
		},
		methods: {
			// 刷新方法
			reloadVal() {
				this.reload();
			},
			// 、
			searchList() {
				this.columnFind(1)
			},
			columnFind(page) {
				const _this = this;
				_this.page.page = page;
				let obj = {
					page: _this.page.page,
					rows: _this.page.pagesize,
					equType: undefined == _this.search.name ? '' : _this.search.name,
					partType: undefined == _this.search.bodysType ? '' : _this.search.bodysType,

				};
				_this.http.request({
					url: paramList,
					data: obj,
					success: function(res) {
						_this.loading = false;
						_this.tableData = res.list;
						_this.page.count = res.total;
					},
					error:function(err){
						_this.$message({
							offset: '200px',
							message: err.msg
						})
					}
				});
			},
			// 听启用
			changeSwitch(index, row) {
				const _this = this;
				let isEnabled = '';
				if (row.isEnabled == true) {
					isEnabled = 1
				} else {
					isEnabled = 0
				}
				let dataMsg = {
					parametersId: row.parametersId,
					isEnabled: isEnabled
				};
				_this.http.request({
					url: paramStatus,
					data: dataMsg,
					success: function(res) {
						row.isEnabled = res.isEnabled;
					},
					error:function(err){
						_this.$message({
							offset: '200',
							message: err.msg
						})
					}
				});
			},
			// 添加参数组
			addColumnClick() {
				const _this = this;
				_this.cname = '添加参数组';
				_this.dialogVisible = true;
			},
			changeStyleValueEditor(val) {
				let obj = {};
				obj = this.bodysListEditor.find(item => {
					return item.id === val;
				});
				this.partTypeEditor = obj.id;
			},
			submitForm() {
				const _this = this;
				let equType = ''
				if (_this.equLeixing == 'PAA抗衰仪') {
					equType = 1;
				}
				if (!this.ruleForm.name) {
					_this.$message({
						offset: '200',
						message: '请选择部位'
					})
					return;
				}
				if (!_this.ruleForm.heightVal) {
					_this.$message({
						offset: '200',
						message: '请输入高温'
					})
					return;
				}
				if (!_this.ruleForm.midVal) {
					_this.$message({
						offset: '200',
						message: '请输入中温'
					})
					return;
				}
				if (!_this.ruleForm.puVal) {
					_this.$message({
						offset: '200',
						message: '请输入普温'
					})
					return;
				}
				if (!_this.ruleForm.lowVal) {
					_this.$message({
						offset: '200',
						message: '请输入低温'
					})
					return;
				}
				if (!_this.ruleForm.strengthHeight) {
					_this.$message({
						offset: '200',
						message: '请输入高能量'
					})
					return;
				}
				if (!_this.ruleForm.strengthMid) {
					_this.$message({
						offset: '200',
						message: '请输入中能量'
					})
					return;
				}
				if (!_this.ruleForm.strengthPu) {
					_this.$message({
						offset: '200',
						message: '请输入普能量'
					})
					return;
				}
				if (!_this.ruleForm.strengthLow) {
					_this.$message({
						offset: '200',
						message: '请输入低能量'
					})
					return;
				}
				let strength = this.ruleForm.lowVal + '#' + this.ruleForm.puVal + '#' + this.ruleForm.midVal + '#' + this.ruleForm.heightVal;
				let temperature = this.ruleForm.strengthLow + '#' + this.ruleForm.strengthPu + '#' + this.ruleForm.strengthMid +
					'#' + this.ruleForm.strengthHeight;
				let dataMsg = {
					equType: equType,
					partType: this.ruleForm.name,
					strength: strength,
					temperature: temperature
				}
				_this.http.request({
					url: deviceParam,
					data: dataMsg,
					success: function() {
						_this.dialogVisible = false;
						_this.reload();

					},
					error:function(err){
						_this.$message({
							offset: '200',
							message: err.msg
						})
					}
				});
			},
			//编辑参数组
			cellClick(row) {
				const _this = this;
				_this.cname = '编辑参数组';
				_this.dialogColor = true;
				_this.http.request({
					url: deviceParamEditor,
					data: {
						parametersId: row.parametersId
					},
					success: function(res) {
						if (res.partType == 1) {
							_this.companyIdEditor = '面部';
							_this.partTypeEditor = "1"
						} else {
							_this.companyIdEditor = '身体';
							_this.partTypeEditor = "2"
						}
						let strengthArr = res.strength.split('#');
						let temperatureArr = res.temperature.split('#');
						_this.lowValE = temperatureArr[0];
						_this.puValE = temperatureArr[1]
						_this.midValE = temperatureArr[2]
						_this.heightValE = temperatureArr[3]
						_this.strengthLowE = strengthArr[0]
						_this.strengthPuE = strengthArr[1]
						_this.strengthMidE = strengthArr[2]
						_this.strengthHeightE = strengthArr[3]
					},
					error:function(err){
						_this.$message({
							offset: '200',
							message: err.msg
						})
					}
				});
			},
			submitForm2() {
				const _this = this;
				let equType = ''
				if (_this.equLeixing == 'PAA抗衰仪') {
					equType = 1;
				}
				if (!this.partTypeEditor) {
					_this.$message({
						offset: '200',
						message: '请选择部位'
					})
					return;
				}
				if (!_this.heightValE) {
					_this.$message({
						offset: '200',
						message: '请输入高温'
					})
					return;
				}
				if (!_this.midValE) {
					_this.$message({
						offset: '200px',
						message: '请输入中温'
					})
					return;
				}
				if (!_this.puValE) {
					_this.$message({
						offset: '200',
						message: '请输入普温'
					})
					return;
				}
				if (!_this.lowValE) {
					_this.$message({
						offset: '200',
						message: '请输入低温'
					})
					return;
				}
				if (!_this.strengthHeightE) {
					_this.$message({
						offset: '200',
						message: '请输入高能量'
					})
					return;
				}
				if (!_this.strengthMidE) {
					_this.$message({
						offset: '200',
						message: '请输入中能量'
					})
					return;
				}
				if (!_this.strengthPuE) {
					_this.$message({
						offset: '200',
						message: '请输入普能量'
					})
					return;
				}
				if (!_this.strengthLowE) {
					_this.$message({
						offset: '200',
						message: '请输入低能量'
					})
					return;
				}
				let strength = this.lowValE + '#' + this.puValE + '#' + this.midValE + '#' + this.heightValE;
				let temperature = this.strengthLowE + '#' + this.strengthPuE + '#' + this.strengthMidE + '#' + this.strengthHeightE;
				let dataMsg = {
					equType: equType,
					partType: this.partTypeEditor,
					strength: strength,
					temperature: temperature
				}
				_this.http.request({
					url: saveEditor,
					data: dataMsg,
					success: function() {
						_this.dialogColor = false;
						_this.reload();
					},
					error:function(err){
						_this.$message({
							offset: '200',
							message: err.msg
						})
					}
				});
			}
		}
	};
</script>

<style scoped="scoped" lang="less">
	.el-button--primary{
		background: rgba(113, 106, 202, 1);
		border: none;
	}
	.el-button--primary:hover{
		color: #606266;
		background: rgba(255, 255, 255, 1);
		border: 1px solid rgba(113, 106, 202, 1);
	}
	.el-button--warning {
		color: #FFF;
		background-color: #F4516C;
		border-color: #F4516C;
	}
	.flex-box {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}
	
	.inputVal {
		margin: 0 10px 10px 10px;
		padding: 10px;
		border-radius: 5px;
		border: 1px solid #EEEEEE;
		width: 100px;
	}
</style>
